import React from 'react'
import './project.css'
// import { PullToRefresh, ListView } from 'antd-mobile'
import { ListView, Button } from 'antd-mobile'

const NUM_ROWS = 20
let pageIndex = 0

function getData(pIndex = 0) {
  const dataArr = []
  for (let i = 0; i < NUM_ROWS; i++) {
    dataArr.push({
      content: `row - ${(pIndex * NUM_ROWS) + i}`,
      name: 'name',
      id: 'id',
      age: 'age'
    })
  }
  return dataArr
}

class Project extends React.Component {

  state = {
    refreshing: true,
    isLoading: true,
    dataSource: new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2,
    })
  }

  componentDidMount() {
    document.title = '项目列表'
    // 加载数据
    setTimeout(() => {
      this.rData = getData()
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this.rData),
        refreshing: false,
        isLoading: false,
      })
    }, 500)
  }

  // // 下拉刷新
  // onRefresh = () => {
  //   this.setState({ refreshing: true, isLoading: true })
  //   // 加载数据
  //   setTimeout(() => {
  //     this.rData = getData()
  //     this.setState({
  //       dataSource: this.state.dataSource.cloneWithRows(this.rData),
  //       refreshing: false,
  //       isLoading: false,
  //     })
  //   }, 500)
  // }

  // 上拉加载
  onEndReached = (event) => {
    if (this.state.isLoading && !this.state.hasMore) return
    console.log('reach end', event)
    this.setState({ isLoading: true })
    // 加载数据
    setTimeout(() => {
      this.rData = [...this.rData, ...getData(++pageIndex)]
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(this.rData),
        isLoading: false,
      })
    }, 300)
  }

  render() {
    // let { dataSource, isLoading, refreshing } = this.state
    let { dataSource } = this.state
    return (
      <div className="_project">
        <ListView
          // 指定在组件刚挂载的时候渲染多少行数据，用这个属性来确保首屏显示合适数量的数据
          // initialListSize = { 50 }
          // 每次事件循环（每帧）渲染的行数
          pageSize={ 20 }
          // ref
          ref={  el => this.lv = el }
          // ListView.DataSource 实例
          dataSource={ dataSource }
          // 调用onEndReached（下拉刷新）之前的临界值，单位是像素
          // onEndReachedThreshold={ 1000 }
          // 样式
          style={{ height: '100%' }}
          // 下拉刷新
          // pullToRefresh = { <PullToRefresh refreshing = { refreshing } onRefresh = { this.onRefresh } /> }
          // 当所有的数据都已经渲染过，并且列表被滚动到距离最底部不足onEndReachedThreshold个像素的距离时调用
          onEndReached={ this.onEndReached }
          // 如果提供了此属性，一个可渲染的组件会被渲染在每一行下面，除了小节标题的前面的最后一行。
          // 在其上方的小节ID和行ID，以及邻近的行是否被高亮会作为参数传递进来。
          renderSeparator={(sectionID, rowID) => (
            <div
              key={ `${ sectionID }-${ rowID }` }
              style={{
                backgroundColor: '#f4f4f5',
                height: '.24rem',
              }}
            />
          )}
          // 页头与页脚（如果提供）会在每次渲染过程中都重新渲染。
          // 如果它们重绘的性能开销很大，把他们包装到一个StaticContainer或者其它恰当的结构中。
          // 页脚在列表的最底部，而页头会在最顶部
          // （页头）
          renderHeader={() => (
            <div className="content">
              <div className="add">
                <button className="add-button">+ 添加项目</button>
              </div>
              {
                this.rData && this.rData.length === 0 &&
                <div className="nodata">
                  <div className="nodata-box">
                    <img className="nodata-img" src="./images/nodata.png" alt=""/>
                    <p className="nodata-text">暂时没有相关项目</p>
                    <Button className="nodata-btn" type="primary" size="large">创建项目</Button>
                  </div>
                </div>
              }
            </div>
          )}
          // （页脚）
          // renderFooter = {() => (
          //   <div style={{ padding: 30, textAlign: 'center' }}>
          //     { isLoading ? '加载中...' : '已加载完' }
          //   </div>
          // )}
          // 从数据源(data source)中接受一条数据，以及它和它所在section的ID。
          // 返回一个可渲染的组件来为这行数据进行渲染。
          // 默认情况下参数中的数据就是放进数据源中的数据本身，不过也可以提供一些转换器。
          // 如果某一行正在被高亮（通过调用highlightRow函数），ListView会得到相应的通知。
          renderRow={(rowData, sectionID, index) => (
            <div className="project-item" key={ index }>
              <div className="project-item-box">
                <div className="project-item-row row1">
                  <div className="project-item-row-left">
                    <div className="item-serial">{ Number(index) + 1 }</div>
                    <div className="item-number">项目编号：7138977264</div>
                  </div>
                  <div className="project-item-row-right">
                    <button className="item-edit">编辑项目</button>
                  </div>
                </div>
                <div className="project-item-row row2">
                  <div className="project-item-row-left">
                    <div className="item-title">大型商业演出招标项目</div>
                  </div>
                  <div className="project-item-row-right">
                    <div className="item-status">待开始</div>
                  </div>
                </div>
                <div className="project-item-row row3">
                  <div className="project-item-row-left">
                    <div className="item-date">开始竞价时间：2020.7.30 17:15</div>
                  </div>
                  <div className="project-item-row-right">
                    <div className="item-name">创建人：黄小姐</div>
                  </div>
                </div>
                <div className="project-item-row row4">
                  <div className="project-item-row-left">
                    <div className="item-count">还未关联供应商 <img className="item-count-icon" src="./images/right_arrow.png" alt=""/></div>
                  </div>
                  <div className="project-item-row-right">
                    <div className="item-btns">
                      <Button className="item-btns-btn1" type="ghost" size="small">关联供应商</Button>
                      <Button className="item-btns-btn2" type="primary" size="small">进入竞拍间</Button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}
        />
      </div>
    )
  }
}

export default Project